<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left"
      label-width="70px">
      <div class="title-container">
        <h3 class="title">{{ title }}</h3>
      </div>
      <el-form-item label="用户名" prop="username">
        <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text" tabindex="1" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码"
          name="password" tabindex="2" />
      </el-form-item>
      <el-form-item label="验证码" prop="checkcode">
        <div class="flex">
          <el-input v-model="loginForm.checkcode" placeholder="请输入验证码" type="text" @keyup.enter.native="triggerClick"/>
          <div @click="getPictureCode" class="flex" style="width:120px;padding-left:10px">
            <el-image :src="coodUrl" style="height:40px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
      </el-form-item>
      <el-button :loading="loading" type="primary" ref="btn" plain style="width:100%;margin-bottom:30px;"
       @click="handleLogin()">登录</el-button>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { validUsername } from "@/utils/validate";
import defaultSettings from "@/settings";
import { getPictureCode, login, queryMenus } from "@/api/user";
const { title } = defaultSettings;
export default {
  name: "Login",
  data() {
    return {
      title,
      coodUrl: "",
      loginForm: {
        username: "",
        password: "",
        checkcode: ""
      },
      loginRules: {
        username: [
          { required: true, message: '用户名',  trigger: "blur"}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: "blur"}
        ],
        checkcode: [
          { required: true, trigger: "blur", message: '请输入验证码' }
        ]
      },
      loading: false,
      passwordType: "password",
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['menus']),
    loginData() {
      return {
        username: this.loginForm.username,
        password: this.loginForm.password,
        checkcode: this.loginForm.checkcode
      };
    }
  },
  mounted() {
    this.getPictureCode();
  },
  methods: {
    ...mapMutations(['SET_MENU']),
    getPictureCode() {
      this.coodUrl = this.$Url + "/login/getPictureCode?t=" + new Date().getTime();
    },
    triggerClick() {
      this.$refs.btn.$emit('click')
    },
    handleLogin() {
      //表单验证
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.DoLogin()
        } else {
          return false;
        }
      });
    },
    async DoLogin() {
      this.loading = false;
      this.$router.replace({ path: "/" });
      return
      const res = await login.post(this.loginData);
      
      this.getPictureCode();
      if (res.resultCode === "000000") {
        sessionStorage.setItem('isLogin', 1)
        sessionStorage.setItem('userName', res.data.rolename + '：' + res.data.username)
        sessionStorage.setItem('endtime', res.data.endtime)
        this.$message.success("登录成功！");
        
        const menu = await queryMenus.post();
        
        if(menu.resultCode === '000000'){
          sessionStorage.setItem('menu', JSON.stringify(menu.data))
          this.SET_MENU(menu.data)
          this.$router.replace({ path: menu.data[0].funcurl || '/404' });
        }else{
          this.$router.replace({ path: "/login" });
        }
      } else {
        this.getPictureCode();
        this.$message.error(res.resultInfo);
      }
    },
  }
};
</script>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  background: url(../../assets/img/loginBG.jpg) no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 0 35px;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    .title-container {
      text-align: center;
      padding: 20px 0;
    }
    .el-image {
      .image__inner {
        height: 40px !important;
      }
    }
  }
}
</style>
